<template>
  <div class="angel-info-temp">
      <div class="header">
          <div class="header-img" v-if="ZRSUserInfo">
              <img :src="ZRSUserInfo.icon" alt="">
          </div>
          <div class="header-name">{{ZRSUserInfo?(ZRSUserInfo.realname || ZRSUserInfo.s_name):''}}</div>
          <!-- <div class="header-gz">关注:</div> -->
      </div>
      <div class="cell-box">
        <van-cell title="与TA沟通" is-link>
          <template #icon>
            <span class="iconfont icon-youjian_o"></span>
          </template>
        </van-cell>
        <van-cell :title="'ID:'+userInfo.code">
          <template #icon>
            <span class="iconfont icon-flag-full"></span>
          </template>
        </van-cell>
        <van-cell :title="'身份：天使代理人'" >
          <template #icon>
            <span class="iconfont icon-huangguan"></span>
          </template>
        </van-cell>
        <van-cell :title="'姓名：'+userInfo.s_name">
          <template #icon>
            <span class="iconfont icon-shenfenzheng"></span>
          </template>
        </van-cell>
        <van-cell :title="'真实姓名：'+userInfo.realname">
          <template #icon>
            <span class="iconfont icon-shenfenzheng"></span>
          </template>
        </van-cell>
        <van-cell :title="'微信：'+userInfo.wx">
          <template #icon>
            <span class="iconfont icon-weixin"></span>
          </template>
        </van-cell>
        <van-cell :title="'手机：'+userInfo.mobile">
          <template #icon>
            <span class="iconfont icon-shouji"></span>
          </template>
        </van-cell>
      </div>
      <footers/>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { Toast, Form, Field, Button, RadioGroup, Radio ,Cell} from 'vant';
export default {
  props: {
      callback: {
          type: Function,
          default: function () { return ''; }
      }
  },
  components: {
      [Field.name]: Field, [Form.name]: Form, [Button.name]: Button, [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,[Cell.name]: Cell,
  },
  computed: {
      ...mapState({
          ZRSUserInfo: state => state.app.ZRSUserInfo
      }),
  },
  data: function () {
      return {
          regMobild:/^1\d{10}$/,
          userInfo: {
              s_name: '',
              realname: '',
              mobile: '',
              adviser: '',
              adviser_mobile: '',
              descp: '',
              code:'',
              typename:'',
          }
      };
  },
  mounted() {
      if (this.ZRSUserInfo) {
          this.userInfo.code = this.ZRSUserInfo.dadinfo.code || '';
          this.userInfo.typename = this.ZRSUserInfo.dadinfo.typename || '';
          this.userInfo.s_name = this.ZRSUserInfo.dadinfo.s_name || '';
          this.userInfo.realname = this.ZRSUserInfo.dadinfo.realname || '';
          this.userInfo.mobile = this.ZRSUserInfo.dadinfo.mobile || '';
          this.userInfo.adviser = this.ZRSUserInfo.adviser || '';
          this.userInfo.adviser_mobile = this.ZRSUserInfo.adviser_mobile || '';
          this.userInfo.descp = this.ZRSUserInfo.descp || '';
      }
  },
  methods: {
      onSubmit() {
          this.$refs['userForm'].validate().then(() => {
              this.$toast.loading('加载中...');
              this.$http
                  .post(this.$API.SET_USERINFO, this.userInfo)
                  .then((res) => {
                      Toast.clear();
                      if (res.code == 1) {
                          if (res.data && res.data.openid) {
                              this.$store.dispatch('app/setZrsUserInfo', Object.assign({}, this.ZRSUserInfo, res.data));
                          }
                      } else {
                          this.$notify({ type: 'warning', message: res.msg });
                      }
                  });
          }).catch(() => {
              this.$notify({ type: 'warning', message: '有必填项未填' });
          });
      },
      getUrlParam(name) {   //name为要获取的参数名
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var rrr = decodeURIComponent(window.location.search);
          var r = rrr.substr(1).match(reg);
          if (r != null) return unescape(r[2]);
          return null;
      },
  },
};
</script>

<style lang="less">
.angel-info-temp {
  .header{
      position: relative;
      padding:0.4rem 0;
      background: #fff;
      border-bottom:1px solid #ddd;
      .header-img{
          display: flex;
          justify-content: center;
          img{
              height: 1.2rem;
              width: 1.2rem;
              object-fit: cover;
              border-radius: 50%;
          }
      }
      .header-name{
          padding-top:0.2rem;
          text-align: center;
          font-size: 0.32rem;
          text-align: center;
          color:#333;
      }
      .header-gz{
          padding-top:0.2rem;
          text-align: center;
          font-size: 0.28rem;
          text-align: center;
          color:#333;
      }
  }
  /* 插件部分样式重置 */
  .van-cell {
      padding: 0.2rem 0.3rem;
      font-size: 0.3rem;
      line-height: 0.48rem;
      &::after{
        border-color:#ddd;
      }
  }

  .van-cell__title {
      font-size: 0.32rem;
  }
  .iconfont{
    font-size: 0.34rem;
    padding:0 0.1rem;
    font-weight: bold;
    color:#000;
  }
}
</style>